<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>КиноКосмос — Безграничная галактика фильмов</title>
  <meta name="description"
  content="Информация о фильмах, рецензии, отзывы пользователей и многое другое. Поделитесь своим мнением и узнайте о любимых фильмах больше.">
  <link rel="stylesheet" href="./assets/style/main.scss" />
  <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico" />
  <link rel="shortcut icon" href="/assets/images/favicon.ico" />
</head>

<body>


  <header class="header">

    <div class="header__logo logo">
      <a href="./index.html" class="logo__item"><img src="./assets/images/logo_black.svg" alt="" class="logo__picture"><img src="./assets/images/logo_text_black.svg" alt="" class="logo__picture logo__picture_text"></a>
    </div>
    <div class="header__links link">
      <a href="./catalog.html" class="link__item">Каталог</a>
    </div>
    <div class="header__search search">
      <input type="text" placeholder="Поиск" class="search__input">
      <ul class="search__list list">
        <!-- <li class="list__item"></li> -->
      </ul>
    </div>
    <div class="header__account account">
        <div class="account__personal">
          <div class="account__greeting" id="hiNameUser"></div>
          <img src="./assets/images/avatar.svg" alt="avatar" class="account__avatar">
        </div>
        <div class="account__exit exit">
          <div class="exit__text">Выйти&nbsp;</div>
          <img src="./assets/images/logout.svg" alt="door" class="exit__img">
        </div>
      <div class="account__enter" id="hiUser">
        <button class="account__btn" id="btnOpen">Войти</button>
      </div>
    </div>
    <div class="burger-menu">
      <a href="" class="burger-menu__button">
        <span class="burger-menu__lines"></span>
      </a>
      <nav class="burger-menu__nav">
        <a href="./catalog.html" class="burger-menu__link">Каталог</a>
        <a href="./personalaccount.html" class="burger-menu__link" id="personalAccount">Личный кабинет<img src="./assets/images/avatar_white.svg" alt="avatar" class="tiny-img"></a>
        <a class="burger-menu__link" id="btnOpenBurger">Войти<img src="./assets/images/login_white.svg" alt="door" class="tiny-img"></a>
        <div class="burger-menu__link burger-menu__exit">Выйти
            <img src="./assets/images/logout_white.svg" alt="door" class="tiny-img">
        </div>
        <a href="./index.html" class="burger-menu__link">На главную<img src="./assets/images/logo_white.svg" alt="logo" class="tiny-img"><img src="./assets/images/logo_text_white.svg" alt="logo" class="tiny-img"></a>
      </nav>
      <div class="burger-menu__overlay"></div>
    </div>
  </header>




  <!-- Модальное окно -->
  <dialog class="dialog" id="windModal">
    <div class="dialog__close">
      <button class="dialog__close-btn" id="btnClose">&#10799;</button>
    </div>
    <div class="dialog__container" id="formContainer">
      <div class="dialog__one-block main-form">
        <h2 class="dialog__title">КиноКосмос</h2>
        <p class="dialog__text dialog-form">Войти в личный кабинет</p>
        <form class="dialog-form__form" name="loginForm" novalidate>
          <div class="dialog-form__email">
            <label for="loginEmail" class="dialog-form__email-text">Email</label>
            <input type="email" name="secondEmail" class="dialog-form__email-input" id="loginEmail"
              placeholder="Введите email..." required>

            <p class="dialog-form__email-error error-text" id="dialogEmailError"></p>
          </div>
          <div class="dialog-form__password">
            <label for="loginPassword" class="dialog-form__password-text">Пароль <button
                class="dialog-form__password-btn" id="passwordBtn">Забыли пароль?</button></label>
            <input name="newPassword" class="dialog-form__password-input" type="password" id="loginPassword"
              placeholder="Введите пароль..." minlength="8" required>

            <p class="dialog-form__password-error error-text" id="dialogPasswError"></p>
          </div>
          <div class="dialog-form__btn">
            <button class="dialog-form__btn-text" id="btnLogin">Войти</button>
          </div>
        </form>

        <div class="dialog__block">
          <p class="dialog__block-text">Новенький?</p>
          <a class="dialog__block-link" href="./registr.html">создай аккаунт</a>
        </div>
      </div>

      <!-- пользователь вводит свой email и кодовое слово -->
      <div class="dialog__two-block check-input" id="examDate">
        <h5 class="dialog__text-title dialog-form">Введите почту и кодовое слово, которые Вы вводили при регистрации
        </h5>
        <form class="dialog-form__form" name="secondForm" novalidate>
          <div class="dialog-form__email">
            <label for="secondEmail" class="dialog-form__email-text">Email</label>
            <input type="email" name="secondEmailInput" class="dialog-form__email-input" id="secondEmail"
              pattern="^[A-Z0-9\._%\+-]+@[A-Z0-9-]+\.[A-Z]{2,4}$" placeholder="Введите email..." required>

            <p class="dialog-form__err-email error-text" id="secondEmailErr"></p>
          </div>
          <div class="dialog-form__secret">
            <label for="secondSecret" class="dialog-form__secret-text">Кодовое слово</label>
            <input type="text" placeholder="Введите кодовое слово..." name="secondSecretInput"
              class="dialog-form__secret-input" id="secondSecret" minlength="2" required>

            <p class="dialog-form__err-secret error-text" id="secondSecretErr"></p>
          </div>
          <div class="dialog-form__btn">
            <button class="dialog-form__btn-text" id="secondBtn">Проверить</button>
          </div>
        </form>
      </div>

      <!-- пользователь вводит новый пароль и повторяет введенный выше пароль. Пароль перезаписывается в БД -->


      <div class="dialog__three-block new-pass" id="replacePass">
        <h5 class="dialog__text-title dialog-form">Введите новый пароль</h5>
        <form class="dialog-form__form" name="thirdForm" novalidate>
          <div class="dialog-form__password">
            <label for="thirdPassword" class="dialog-form__password-text">Пароль</label>
            <input name="thirdCheckOk" type="password" class="dialog-form__password-input" id="thirdPassword"
              placeholder="Введите новый пароль..." minlength="8" required>

            <p class="dialog-form__err-password error-text" id="thirdPasswordErr"></p>
          </div>
          <div class="dialog-form__reappassword">
            <label for="thirdReappassword" class="dialog-form__reappassword-text">Повторите пароль</label>
            <input type="password" name="thirdCheckOk" class="dialog-form__reappassword-input" id="thirdReappassword"
              placeholder="Повторите пароль..." minlength="8" required>

            <p class="dialog-form__err-reappassword error-text" id="thirdReappasswordErr"></p>
          </div>
          <div class="dialog-form__btn">
            <button class="dialog-form__btn-text" id="thirdBtn">Изменить пароль</button>
          </div>
        </form>
      </div>

      <!-- Новый пароль успешно зарегестрирован -->


      <div class="dialog__four-block ok-block">
        <div class="ok-block__location">
          <p class="ok-block__text">Вы успешно изменилии пароль</p>
          <button class="ok-block__btn" id="newComwIn">перейти в форму входа</button>
        </div>
      </div>

    </div>
  </dialog>








  <!--Начало главной страницы-->
  <main class="block-main">
    <div class="main-page">
      <!--Контейнер-->
      <div class="main-page__main-block main-block">
        <div class="main-page__wrapper">
          <!--Левая часть страницы с заголовком текстом и кнопками-->
          <div class="main-page__left-wrapper left-wrapper">
            <div class="block-info">
              <!--Заголовок-->
              <h1 class="block-info__title title">КиноКосмос</h1>
              <!--Подзаголовок-->
              <h2 class="block-info__subtitle subtitle">Узнай о фильмах всё и поделись своим мнением!</h2>
              <!-- <h2 class="block-info__subtitle subtitle">и поделись своим мнением!</h2> -->
              <p class="block-info__text"> Погрузись в безграничную галактику кино на нашем сайте! У нас ты
                найдешь обширную информацию о фильмах. Читай отзывы и рецензии от экспертов и делись своими
                впечатлениями с другими пользователями. Возьми под контроль свою коллекцию фильмов, добавляй их в
                Избранное и создавай персональные списки для каждого настроения. Расширенный поиск с фильтрами поможет
                найти желаемое кино быстро и легко. Зарегистрируйся или войди в свою учетную запись, чтобы
                насладиться всеми возможностями КиноКосмос!</p>

            </div>

          </div>
          <!--Правая часть страницы куда мы внесем постеры к фильмам-->
          <div class="main-page__right-wrapper right-wrapper">
            <div class="block__posters" id="block-posters">
              <div class="block__upper-posters upper-posters" id="upper-posters"></div>
              <div class="block__down-posters down-posters" id="down-posters"></div>
            </div>
          </div>
        </div>

        <div class="main-page__subtext">
          <p class="subtext" id="subtext-quote"></p>
        </div>
  
      </div>

    </div>
    <a href=""></a>
  </main>
  <!--Конец главной страницы-->



  <script type="module" src="./src/header.js"></script>
  <script type="module" src="./src/modal.js"></script>
  <script type="module" src="./src/index.js"></script>
  <script type="module" src="./src/quotes.js"></script>

</body>

</html>